<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>slot-插槽的具名使用</title>
</head>
<body>
<div id="app">
  <!--可以通过给插槽命名，来确认用的是哪个插槽-->
  <cpn>
    <span slot="center">标题</span>
    <button slot="left">返回</button>
    <span slot="right">选择</span>
  </cpn>
</div>

<template id="cpn">
  <div>
    <slot name="left">左边</slot>
    <slot name="center">中间</slot>
    <slot name="right">右边</slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn'
  }
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue'
    },
    components: {
      cpn: cpn
    }
  });
</script>
</body>
</html>
